﻿@model TonyBlogs.DTO.BlogArticle.BlogArticleDetailPageDTO

@section css{
    <style type="text/css">
        .blog-detail img {
            max-width: 100%;
        }
        [v-cloak] {
            display: none;
        }
    </style>
}

<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40 v-cloak" id="app">
    <!-- BEGIN CONTENT -->
    <div class="col-md-12 col-sm-12">
        <div class="content-page">
            <div class="row">
                <!-- BEGIN LEFT SIDEBAR -->
                <div class="col-md-9 col-sm-9 blog-item blog-detail">
                    <h2 style="margin-bottom:20px">@Model.Title</h2>
                    <div>@Html.Raw(WebUtility.HtmlDecode(Model.Content))</div>

                    <ul class="blog-info">
                        <li><i class="fa fa-user"></i> By @Model.RealName</li>
                        <li><i class="fa fa-calendar"></i> @Model.CreateTime.ToString("yyyy-MM-dd hh:mm:ss")</li>
                        <li><i class="fa fa-eye"></i> @Model.Traffic</li>
                        <li><i class="fa fa-comments"></i> @Model.CommentNum</li>
                        <li><i class="fa fa-tags"></i> @Model.Category</li>
                    </ul>
                    <h3>评论</h3>
                    <div class="comments">
                        <!--end media-->
                        <div class="media comment" v-for="(comment, index) in comments_list">
                            <div class="media-body">
                                <div class="media-heading">
                                <a class="name">{{comment.RealName}}</a> 
                                <span>
                                    {{comment.InsertTime}} / 
                                    <a v-on:click="GoToRelyComment(comment, comment.ID)" href="javascript:;">回复</a>
                                </span>
                            </div>
                                <p>{{comment.Content}}</p>
                                <!-- Nested media object -->
                                <div class="sub-comment-list" v-if="comment.ChildrenList.length>0">
                                    <div class="sub-comment" v-for="sub_comment  in comment.ChildrenList">
                                        <p>
                                            <a class="author" href="/u/" target="_blank">{{sub_comment.RealName}}</a>：
                                            <span v-html="sub_comment.Content"></span>
                                        </p>
                                        <div class="sub-tool-group">
                                            <span>{{sub_comment.InsertTime}}</span>
                                            <a v-on:click="GoToRelyComment(sub_comment, comment.ID)"><i class="fa fa-comment-o"></i> <span>回复</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--end media-->
                    </div>
                    <div class="post-comment padding-top-40" id="post-comment">
                        <form class="new-comment">
                            @if (Model.IsLogin)
                            {
                                <div class="sign-container">
                                    <a href="/admin" class="btn btn-sign">登录</a> <span>后发表评论</span>
                                </div>
                            }
                            else
                            {
                                <textarea placeholder="写下你的评论..." v-on:focus="ShowCommentSendBtn" v-model="CommentAddDTO.Content"></textarea>
                                <div class="write-function-block" v-show="comment_send_btn_show">
                                    @*<div class="emoji-modal-wrap">
                            <a class="emoji"><i class="fa fa-smile-o iconfont ic-comment-emotions"></i></a>
                        </div>*@
                                    <a class="btn btn-send" v-on:click="SendComment">发送</a>
                                    <a class="cancel" v-on:click="ClearComment">取消</a>
                                </div>
                            }
                        </form>
                    </div>
                </div>
                <!-- END LEFT SIDEBAR -->
                <!-- BEGIN RIGHT SIDEBAR -->
                <div class="col-md-3 col-sm-3 blog-sidebar">
                    <ul class="nav sidebar-categories margin-bottom-40">
                        <li><a href="/blog">博客</a></li>
                        <li><a href="/essay">随笔</a></li>
                    </ul>
                    <!-- CATEGORIES END -->
                    <!-- BEGIN BLOGVIEW -->
                    <blogview v-bind:userid="@Model.UserID"></blogview>
                    <!-- END BLOGVIEW -->

                </div>
                <!-- END RIGHT SIDEBAR -->
            </div>
        </div>
    </div>
    <!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
@section scripts{
    <script src="~/Content/assets/global/plugins/vue-2.1.7.min.js"></script>
    <script src="~/Content/js/blog.view.rank.js"></script>

    <script type="text/javascript">
        var data = {
            CommentAddDTO: {
                BlogID: '@Model.ID',
                ParentID: 0,
                Content: '',
            },

            reply_comment: {},
            is_reply:false,
            blog_id: '@Model.ID',  
            
            comment_send_btn_show:false,

            comments_list: [],
        };

        var actions = {
            comments_list: '@Url.Action("AjaxGetCoommentList", "BlogDetail")',
            comments_add: '@Url.Action("AjaxAddComment", "BlogDetail")',
        };

        var paramMethods = {

            GetCommnetList: function () {
                $.ajax({
                    url: actions.comments_list,
                    data: { blogid: data.blog_id },
                    type: "GET",
                    dataType: "json",
                    success: function (retData) {
                        data.comments_list = retData;
                    },
                    error: function (retData) {
                        Metronic.simpleAlert("发生错误，请重试！");
                    }
                })
            },

            ClearComment: function () {
                data.CommentAddDTO.Content = '';
                data.CommentAddDTO.ParentID = 0;
                data.is_reply = false;
                data.reply_comment = {};
                this.ToggleCommentSendBtn();
            },

            ToggleCommentSendBtn: function () {
                data.comment_send_btn_show = !data.comment_send_btn_show;
            },

            ShowCommentSendBtn: function () {
                data.comment_send_btn_show = true;
            },

            SendComment: function () {
                if (data.is_reply) {
                    this.ReplyComment();
                }
                else {
                    this.AddComment();
                }
            },

            AddComment: function () {
                data.CommentAddDTO.ParentID = 0;
                this.AjaxAddComment(data.CommentAddDTO);
            },

            GoToRelyComment: function (pComment, pId) {
                data.reply_comment = pComment;
                data.reply_comment.ID = pId;
                data.is_reply = true;
                data.CommentAddDTO.Content = "@@" + pComment.RealName + " ";
                this.ToggleCommentSendBtn();
                $("#post-comment textarea").focus();
                Metronic.scrollTo($("#post-comment"));

            },
            
            ReplyComment: function () {
                var actionData = $.extend({}, data.CommentAddDTO);
                actionData.ParentID = data.reply_comment.ID;

                var atAuthor = "@@" + data.reply_comment.RealName;
                var atAuthorLink = Metronic.formatString('&lt;a class="author" href="/u/{0}" target="_blank"&gt;{1}&lt;/a&gt;',
                                                data.reply_comment.UserID, atAuthor);
                actionData.Content = actionData.Content.replace(atAuthor, atAuthorLink);

                this.AjaxAddComment(actionData);
            },

            AjaxAddComment: function (actionData) {

                if (actionData.Content.length <= 0 ) {
                    Metronic.remindError("回复内容不能为空！");
                    return;
                }

                $.ajax({
                    url: actions.comments_add,
                    data: actionData,
                    type: "POST",
                    dataType: "json",
                    success: function (retData) {
                        if (retData.IsSuccess) {
                            Metronic.remindSuccess("回复成功")
                            paramMethods.GetCommnetList();
                            paramMethods.ClearComment();
                        }
                        else {
                            Metronic.remindError(retData.Message);
                        }
                    },
                    error: function (retData) {
                        Metronic.remindError("发生错误，请重试！");
                    }
                })
            },

        };

        var vueObj = new Vue({
            el: "#app",
            data: data,
            methods: paramMethods,
            mounted: function () {
                this.GetCommnetList();
            },
        });


    </script>
}